<template>
	<div class="maincs">
		<div class="main_spac1" style="padding-bottom: 5px">
			<div
				class="main_white padding10"
				element-loading-text="加载中"
				v-loading="listLoading"
				style="min-height: 780px"
			>
				<div class="address_container">
					<div class="address_box">
						<span>商城入口地址:</span>
						<a :href="shop_url" target="_blank">{{ shop_url }}</a>
						<i class="el-icon-document-copy" @click="handleCopy"></i>
					</div>
					<div class="more_address">
						<el-dropdown
							placement="bottom-start"
							style="margin-left: 45px"
							trigger="click"
						>
							<span class="el-dropdown-link">
								更多入口<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item
									v-for="item in more_address_url"
									:key="item.name"
								>
									<div class="dropdown_item">
										<span>{{ item.title }}:</span>
										<a :href="item.url" target="_blank">{{ item.url }}</a>
										<i
											class="el-icon-document-copy"
											@click="handleCopyMore(item)"
										></i>
									</div>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>

				<!-- 左侧 -->
				<div class="left_box">
					<div class="left">
						<div class="search flex-middle">搜索</div>
						<div
							:class="[{ on: banner.show }, ' left_modle banner_box']"
							@click="showModle('banner')"
						>
							<img src="../../assets/images/shop_banner.png" width="100%" />
						</div>
						<div
							:class="[{ on: infomation.show }, ' left_modle info']"
							@click="showModle('infomation')"
						>
							<img
								src="../../assets/images/infomation.jpg"
								width="100%"
								style="margin-top: 0px"
							/>
						</div>
						<div
							:class="[{ on: parts.show }, ' left_modle part part_model']"
							@click="showModle('parts')"
						>
							<img
								v-show="parts.style == 1"
								src="../../assets/images/part1.png"
								width="100%"
							/>
							<img
								v-show="parts.style == 2"
								src="../../assets/images/part2.png"
								width="100%"
							/>
						</div>
						<div class="special">
							<div class="special_title">精选专题</div>
							<div
								:class="[{ on: subject.show }, ' left_modle subject']"
								@click="showModle('subject')"
							>
								<img
									v-show="subject.style == 1"
									src="../../assets/images/subject1.jpg"
									width="100%"
								/>
								<img
									v-show="subject.style == 2"
									src="../../assets/images/subject2.jpg"
									width="100%"
								/>
								<img
									v-show="subject.style == 3"
									src="../../assets/images/subject3.jpg"
									width="100%"
								/>
							</div>
						</div>

						<!-- <div class="title" style="margin-top: 17px">精选商品</div> -->
						<div class="commodity">
							<div
								:class="[{ on: goods.show }, ' left_modle goods']"
								@click="showModle('goods')"
							>
								<img src="../../assets/images/goods.jpg" width="100%" />
							</div>
						</div>
						<div
							:class="[{ on: tabbar.show }, ' left_modle tabbar']"
							@click="showModle('tabbar')"
						>
							<img src="../../assets/images/tabbar.jpg" width="100%" />
						</div>
					</div>
				</div>

				<!-- 右侧 -->
				<div class="right">
					<!-- 轮播图 -->
					<banner
						ref="refBanner"
						:show="banner.show"
						@selectGoods="selectGoods"
						:puzzleImg="puzzleImg"
						:upload_img="upload_img"
						:uploadHeader="uploadHeader"
						@changeUploadType="changeUploadType"
					></banner>
					<!-- 公告 -->
					<infomation :show="infomation.show"></infomation>
					<!-- 分类导航 -->
					<parts
						ref="refParts"
						:show="parts.show"
						:styleNum="parts.style"
						@chooseStyle="chooseStyle"
						:puzzleImg="puzzleImg"
						:upload_img="upload_img"
						:uploadHeader="uploadHeader"
						@changeUploadType="changeUploadType"
					></parts>
					<!-- 精选专题 -->
					<subject
						ref="refSubject"
						:show="subject.show"
						:styleNum="subject.style"
						@chooseStyle="chooseStyle"
						@selectGoods="selectGoods"
						:puzzleImg="puzzleImg"
						:upload_img="upload_img"
						:uploadHeader="uploadHeader"
						@changeUploadType="changeUploadType"
					></subject>
					<!-- 推荐商品 -->
					<goods
						ref="refGoods"
						:show="goods.show"
						@selectGoods="selectGoods"
					></goods>
					<!-- 底部导航 -->
					<div class="modle tabbar" v-show="tabbar.show">
						<div class="tit"><b>底部导航</b></div>
						<el-row class="setting">
							<el-col :span="12"
								><span>[首页]强制登录</span
								><el-switch
									v-model="switchValue.is_login_index"
									@change="changeSwitch($event, 'is_login_index')"
									:active-value="1"
									:inactive-value="0"
									active-color="#19b098"
								></el-switch
							></el-col>
							<el-col :span="12"
								><span>[分类]强制登录</span
								><el-switch
									v-model="switchValue.is_login_category"
									@change="changeSwitch($event, 'is_login_category')"
									:active-value="1"
									:inactive-value="0"
									active-color="#19b098"
								></el-switch
							></el-col>
							<el-col :span="12"
								><span>[购物车]强制登录</span
								><el-switch
									v-model="switchValue.is_login_cart"
									@change="changeSwitch($event, 'is_login_cart')"
									:active-value="1"
									:inactive-value="0"
									active-color="#19b098"
								></el-switch
							></el-col>
							<el-col :span="12"
								><span>[我的]强制登录</span
								><el-switch
									v-model="switchValue.is_login_my"
									@change="changeSwitch($event, 'is_login_my')"
									:active-value="1"
									:inactive-value="0"
									active-color="#19b098"
								></el-switch
							></el-col>
						</el-row>
						<div class="flex-center">
							<div class="submit flex-center" @click="submitSwitch()">保存</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 选择商品弹窗 -->
		<el-dialog
			title="请选择商品"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			@close="close"
			:visible.sync="shield"
			class="main_dialog dialog900"
		>
			<div class="mainor_form">
				<el-form
					:inline="true"
					:model="form_sh"
					class="demo-form-inline"
					ref="userListFrom1"
					label-width="10px"
				>
					<el-form-item label prop="category_id" class="wid180">
						<el-cascader
							v-model="form_sh.category_id"
							:options="options"
							:props="defaultProps"
							placeholder="分类"
						></el-cascader>
					</el-form-item>
					<el-form-item label=" " prop="name">
						<el-input
							v-model.trim="form_sh.name"
							placeholder="名称"
							clearable
							class="wid180"
						></el-input>
					</el-form-item>
					<el-form-item>
						<el-button
							class="reset marginLeft10"
							type="primary"
							@click="diareset"
							>重置</el-button
						>
						<el-button
							type="primary"
							@click="getArticleList"
							:loading="listLoading"
							>搜索</el-button
						>
					</el-form-item>
				</el-form>
			</div>
			<div class="main_table">
				<el-table
					ref="multipleTable1"
					v-loading="listLoading"
					:data="list_sh.list.data"
					element-loading-text="加载中"
					fit
					border
					max-height="500"
					highlight-current-row
					@selection-change="chooseGoods"
				>
					<!-- @selection-change="handleSelectionChange" -->
					<!-- 多选 -->
					<el-table-column type="selection" v-if="!isRadio" width="55">
					</el-table-column>
					<!-- 单选 -->
					<el-table-column width="50">
						<template slot-scope="scope">
							<el-radio
								v-if="isRadio"
								@change="chooseGoods(scope.row)"
								v-model="current.id"
								:label="scope.row.id"
								>{{ "" }}</el-radio
							>
						</template>
					</el-table-column>

					<el-table-column
						label="名称"
						prop="name"
						:show-overflow-tooltip="true"
					/>
					<el-table-column
						label="别名"
						prop="byname"
						:show-overflow-tooltip="true"
					/>
					<el-table-column label="图片" width="120" class-name="main_hei">
						<template slot-scope="scope">
							<div class="demo-image__error mainor_im">
								<el-image
									fit="fill"
									:src="scope.row.pic"
									:preview-src-list="scope.row.pics"
								>
									<div slot="error" class="image-slot">
										<img :src="puzzleImg" />
									</div>
								</el-image>
							</div>
						</template>
					</el-table-column>
					<el-table-column
						label="分类"
						prop="userNickname"
						width="180"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">
							<!-- title为null报错 -->
							{{ scope.row.category_p ? scope.row.category_p.title : "无" }}|{{
								scope.row.category ? scope.row.category.title : "无"
							}}
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="main_page boxdq">
				<!-- 分页 -->
				<div class="main_page_r">
					<el-pagination
						:current-page="current_sh.page"
						:page-sizes="[10, 30, 50, 100]"
						:page-size="limit_sh"
						layout="total, sizes, prev, pager, next, jumper"
						:total="totalCount_sh"
						background
						@size-change="changeLimit"
						@current-change="changePage"
					/>
				</div>
				<div></div>
			</div>

			<div slot="footer" class="dialog-footer">
				<el-button @click="close()">取 消</el-button>
				<el-button type="primary" @click="submitGoods" v-repeatClick
					>确 定</el-button
				>
			</div>
		</el-dialog>
		<!-- 选择上传的类型 -->
		<el-dialog
			title="选择上传类型"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:visible.sync="upload_type_show"
			class="main_dialog_copy dialog500"
		>
			<div class="upload_type_container">
				<div @click="upload_type_show = false">
					<el-upload
						ref="upload"
						:action="upload_img"
						:data="{ store: 'shop' }"
						:headers="uploadHeader"
						:on-success="
							(response, file, fileList) => {
								uploadSuccess(response);
							}
						"
						:on-error="uploadErr"
					>
						<div class="upload_box flex-center">本地上传</div>
					</el-upload>
				</div>
				<div @click="upload_online">在线图库</div>
			</div>
			<!-- <div slot="footer">
        <el-button v-repeatClick>关 闭</el-button>
      </div> -->
		</el-dialog>
		<!-- 在线图库 -->
		<el-dialog
			title="在线图库"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:visible.sync="online_images_show"
			@close="online_images_close"
			class="main_dialog_copy dialog790 online_images_dialog"
		>
			<div class="online_images_container">
				<div class="header">
					<el-tabs v-model="activeName" @tab-click="handleClicktab">
						<el-tab-pane label="全部图片" name=""> </el-tab-pane>
						<el-tab-pane
							v-for="(item, index) in upload_data.category"
							:key="index"
							:label="item.name"
							:name="String(item.id)"
						></el-tab-pane>
					</el-tabs>
				</div>
				<div class="container">
					<!-- 图片盒子 -->
					<div class="image_box">
						<div
							class="item"
							v-for="(item, index) in upload_data.list"
							:key="index"
							@mouseover="item.show = true"
							@mouseleave="item.show = false"
						>
							<el-tooltip effect="dark" :content="item.remark" placement="top">
								<div>
									<div class="image">
										<el-image fit="fill" :src="item.path" :title="item.remark">
											<div slot="error" class="image-slot">
												<img :src="puzzleImg" />
											</div>
										</el-image>
									</div>
									<div class="image_mask" v-if="item.show">
										<div class="image_mask_main">
											<span @click="handleUpload(item)">点击使用</span>
										</div>
									</div>
								</div>
							</el-tooltip>
						</div>
					</div>
					<div class="no_image" v-if="upload_data.list.length == 0">
						<img src="@/assets/images/no_data.png" alt="" />
					</div>
				</div>
				<div class="footer_page">
					<div class="main_page boxdq">
						<div class="main_page_r">
							<el-pagination
								:current-page="upload_current_sh.page"
								:page-sizes="[10, 30, 50, 100]"
								:page-size="upload_limit_sh"
								layout="total, sizes, prev, pager, next, jumper"
								:total="upload_totalCount_sh"
								@size-change="upload_changeLimit"
								@current-change="upload_changePage"
							/>
						</div>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { mapGetters } from "vuex";
	import store from "@/store";
	import { datum_index } from "@/api/commodity/commoditySupporting";
	// import { groupGoods_goods } from "@/api/user/userGroup";
	import {
		poster_save,
		isLoginSet_index,
		isLoginSet_save,
		groupGoods_goods,
		goodsSelect_checkImage,
		getShopUrl,
	} from "@/api/shop/shop";
	import { puzzleImg, uploadPath } from "@/api/currency";
	import { apiUrl, objKeySort, Md5 } from "@/utils/public";
	import { recursion, category } from "@/utils/index";
	import infomation from "./components/infomation";
	import banner from "./components/banner";
	import goods from "./components/goods";
	import parts from "./components/parts";
	import subject from "./components/subject";

	export default {
		components: {
			infomation,
			banner,
			goods,
			parts,
			subject,
		},
		data() {
			return {
				bannerimg: require("@/assets/shop/banner1.jpg"),
				listLoading: false,
				switchValue: {
					is_login_index: 0,
					is_login_category: 0,
					is_login_cart: 0,
					is_login_my: 0,
				},

				// 控制右侧模块
				banner: { show: false },
				infomation: { show: false },
				parts: { show: false, style: 1 },
				subject: { show: true, style: 1 },
				goods: { show: false },
				tabbar: { show: false },

				isRadio: true, //选择商品弹窗 是否是单选
				//临时存储 选择的商品数据
				// temporaryGoodsInfo:{},
				temporaryGoodsInfo: [],
				//确定后保存
				goodsInfo: [],

				current: {
					id: "",
					index: [],
				},

				// 分类
				options: [],
				shield: false, //控制选择商品弹窗
				list_sh: {
					list: {
						data: [],
					},
				},
				form_sh: {
					pid: "",
					category_id: [],
					name: "",
				},
				current_sh: {
					page: 1,
					per_page: 50,
				},
				limit_sh: 50,
				totalCount_sh: 1,
				selectArr_sh: [],
				defaultProps: {
					children: "selfNext",
					label: "title",
					value: "id",
					checkStrictly: true,
				},

				uploadHeader: {
					Authorization: store.getters.token,
				},
				puzzleImg,
				upload_img: uploadPath,

				/*  上传方式 */
				upload_type_show: false,
				online_images_show: false,
				activeName: "",
				upload_current_sh: {
					page: 1,
					per_page: 50,
				},
				upload_limit_sh: 50,
				upload_totalCount_sh: 1,
				upload_data: {
					category: [],
					list: [],
				},
				upload_form: {
					pid: 1,
					category_id: "",
				},
				upload_current: {
					ref: "refBanner",
				},
				shop_url: "",
				more_address_url: [
					{
						title: "超管助手",
						url: "",
						name: "administor_url",
					},
					{
						title: "采购助手",
						url: "",
						name: "buyer_url",
					},
					{
						title: "司机助手",
						url: "",
						name: "driver_url",
					},

					{
						title: "业务员助手",
						url: "",
						name: "salesman_url",
					},

					{
						title: "供应商助手",
						url: "",
						name: "supplier_url",
					},
					{
						title: "药残检测",
						url: "",
						name: "drug_url",
					},
					{
						title: "触摸屏分拣",
						url: "",
						name: "sort_url",
					},
					{
						title: "供应商分拣",
						url: "",
						name: "gysfj_url",
					},
					{
						title: "收购本地菜",
						url: "",
						name: "local_url",
					},
				],
			};
		},
		computed: {
			...mapGetters(["avatar"]),
		},
		created() {
			this.getSwitch();
			//获取选择商品列表的数据
			this.groupGoods_goods();
			this.getShopUrl();
		},
		methods: {
			getSwitch() {
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
						),
					},
					apiUrl().name
				);
				isLoginSet_index(data).then((res) => {
					if (res.errcode == 0) {
						this.switchValue = {
							is_login_index: res.data.list.is_login_index,
							is_login_category: res.data.list.is_login_category,
							is_login_cart: res.data.list.is_login_cart,
							is_login_my: res.data.list.is_login_my,
						};
					} else {
						this.$message.error(res.errmsg);
					}
				});
			},
			submitSwitch() {
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name, this.switchValue)) +
								apiUrl().appsecret
						),
					},
					this.switchValue,
					apiUrl().name
				);
				isLoginSet_save(data).then((res) => {
					if (res.errcode == 0) {
						this.$message.success("保存成功");
					} else {
						this.$message.error(res.errmsg);
					}
				});
			},
			//显示右侧弹窗
			showModle(type) {
				this.banner.show = false;
				this.infomation.show = false;
				this.parts.show = false;
				this.subject.show = false;
				this.goods.show = false;
				this.tabbar.show = false;
				this.$nextTick(() => {
					this[type].show = true;
				});
			},
			//选择样式
			chooseStyle(name, type) {
				this[name].style = type;
			},
			//强制登录
			changeSwitch(e, type) {
				this.switchValue[type] = e;
			},
			//打开弹窗
			selectGoods(options) {
				this.temporaryGoodsInfo = {};
				this.current = {
					index: options.index,
					id: options.id,
					ref: options.ref,
				};
				this.isRadio = options.isRadio;
				this.shield = true;
			},
			//弹窗选择商品（单选）
			chooseGoods(data) {
				this.temporaryGoodsInfo = data;
			},
			// // 弹窗选择商品（多选）
			// handleSelectionChange(val) {
			//   console.log('多选',val)
			//     this.selectArr_sh = [];
			//     val.map((item) => {
			//       this.selectArr_sh.push({ id: item.id });
			//     });
			// },
			// 确定选择商品
			submitGoods() {
				let index = this.current.index,
					ref = this.current.ref;
				this.$refs[ref].getSelectedGood(index, this.temporaryGoodsInfo);

				this.close();
			},
			groupGoods_goods() {
				this.listLoading = true;
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(
								Object.assign(
									apiUrl().name,
									this.list_form(),
									{ group_id: this.id },
									this.current_sh
								)
							) + apiUrl().appsecret
						),
					},
					apiUrl().name,
					{ group_id: this.id },
					this.list_form(),
					this.current_sh
				);
				groupGoods_goods(data).then((res) => {
					this.listLoading = false;
					if (res.errcode == 0) {
						this.options = recursion(res.data.categoryList, true);
						res.data.list.data.map((e) => {
							if (e.images.length != 0) {
								e.images.map((a) => {
									a.path = this.avatar.domain + a.path;
									if (a.main == 1) {
										e.pic = a.path;
									}
								});
								e.pics = e.images.map((s) => s.path);
							} else {
								e.pic = "";
								e.pics = [];
							}
						});
						this.list_sh = res.data;
						this.totalCount_sh = res.data.list.total;
					} else {
						this.$message.error(res.errmsg);
					}
				});
			},
			list_form() {
				let form_sh = JSON.parse(JSON.stringify(this.form_sh));
				form_sh.pid = form_sh.category_id[0] ? form_sh.category_id[0] : "";
				form_sh.category_id = category(form_sh.category_id);
				return form_sh;
			},
			// 搜索
			getArticleList() {
				this.current_sh.page = 1;
				this.groupGoods_goods();
			},
			diareset() {
				this.$refs["userListFrom1"].resetFields();
				this.getArticleList();
			},
			// 关闭清空表单
			close() {
				this.$refs["userListFrom1"].clearValidate();
				this.current = { id: "", index: [] };
				this.temporaryGoodsInfo = {};
				this.shield = false;
				this.$nextTick(() => {
					if (!this.isRadio) {
						this.$refs.multipleTable1.clearSelection();
					}
				});
			},
			// 分页
			changeLimit(pageSize) {
				this.current_sh.per_page = pageSize;
				this.groupGoods_goods();
			},
			changePage(page) {
				this.current_sh.page = page;
				this.groupGoods_goods();
			},

			/* ----在线图库---- */
			// 图片上传
			uploadSuccess(res) {
				let ref = this.upload_current.ref;
				this.$refs[ref].getUploadImg(res);
			},
			uploadErr() {
				this.$message.error("上传失败，请重试");
			},
			// 选择在线图库
			upload_online() {
				this.$nextTick(() => {
					this.goodsSelect_checkImage();
					this.online_images_show = true;
				});
			},
			online_images_close() {
				this.upload_type_show = false;
				this.$nextTick(() => {
					this.online_images_show = false;
					this.activeName = "";
					this.upload_form.pid = "";
					this.upload_form.category_id = "";
					this.upload_data.category = [];
					this.upload_data.list = [];
				});
			},
			upload_changeLimit(pageSize) {
				this.upload_current_sh.per_page = pageSize;
				this.goodsSelect_checkImage();
			},
			upload_changePage(page) {
				this.upload_current_sh.page = page;
				this.goodsSelect_checkImage();
			},
			// 选择上传图片方式
			changeUploadType(options) {
				this.upload_form.pid = options.pid;
				this.upload_current.ref = options.ref;
				this.upload_type_show = true;
			},
			// 加载列表
			goodsSelect_checkImage() {
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(
								Object.assign(
									apiUrl().name,
									this.list_form(),
									{ group_id: this.id },
									this.current_sh
								)
							) + apiUrl().appsecret
						),
					},
					apiUrl().name,
					this.upload_current_sh,
					this.upload_form
				);
				goodsSelect_checkImage(data).then((res) => {
					if (res.errcode == 0) {
						if (this.upload_data.category.length == 0) {
							this.upload_data.category = res.data.category;
						}
						res.data.list.data.map((e) => {
							e.show = false;
							e.path = this.avatar.domain + e.img;
						});
						this.upload_data.list = res.data.list.data;
						this.upload_totalCount_sh = res.data.list.total;
					} else {
						this.$message.error(res.errmsg);
					}
				});
			},
			// 切换导航栏
			handleClicktab(tab, event) {
				this.upload_form.category_id = this.activeName;
				this.goodsSelect_checkImage();
			},
			// 点击使用图片
			handleUpload(item) {
				this.$confirm("确定使用该图片吗?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(() => {
						let res = {
							code: 0,
							data: {
								path: item.img,
								src: item.path,
							},
						};
						let ref = this.upload_current.ref;
						this.$refs[ref].getUploadImg(res);
						this.online_images_close();
					})
					.catch(() => {});
			},
			// 获取商城地址
			getShopUrl() {
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name, this.switchValue)) +
								apiUrl().appsecret
						),
					},
					apiUrl().name
				);
				getShopUrl(data).then((res) => {
					this.shop_url = res.shop_url;
					let response = res;
					this.more_address_url.map((e) => {
						e.url = response[e.name];
					});
				});
			},
			// 一键复制
			handleCopy() {
				if (!this.shop_url) {
					return;
				}
				this.copyToClipboard(this.shop_url); // 需要复制的文本内容
				this.$message.success("商城入口地址复制成功！");
			},
			// 更多入口复制
			handleCopyMore(item) {
				if (!item.url) {
					return;
				}
				this.copyToClipboard(item.url); // 需要复制的文本内容
				this.$message.success(`${item.title}地址复制成功！`);
			},

			// 点击复制到剪贴板函数
			copyToClipboard(content) {
				if (window.clipboardData) {
					window.clipboardData.setData("text", content);
				} else {
					(function (content) {
						document.oncopy = function (e) {
							e.clipboardData.setData("text", content);
							e.preventDefault();
							document.oncopy = null;
						};
					})(content);
					document.execCommand("Copy");
				}
			},
		},
	};
</script>
<style lang="scss" scoped>
.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.flex-btw {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.flex-middle {
	display: flex;
	align-items: center;
}
.flex-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
/deep/.el-upload-list {
	display: none;
}
.maincs {
	font-size: 12px;
	.main_white {
		overflow: hidden;
		.address_container {
			display: flex;
			align-items: center;
		}
		.address_box {
			display: flex;
			align-items: center;
			padding: 10px 0;
			font-size: 14px;
			a {
				padding: 0 10px;
				color: #19b098;
				text-decoration: underline;
				min-width: 160px;
			}
			i {
				font-size: 16px;
				&:hover {
					color: #19b098;
				}
			}
		}
		.more_address {
			display: flex;
			align-items: center;
			cursor: pointer;
		}

		.left_box {
			width: 375px;
			display: flex;
			flex-direction: column;
			float: left;

			// .submit{
			//   width:100px;
			//   padding:5px 15px;
			//   border-radius: 4px;
			//   background:#19b098;
			//   color:#fff;
			//   margin-top: 20px;
			// }
		}
		.left {
			width: 375px;
			min-height: 667px;
			border: 2px solid #eee;
			background: #f6f6f7;
			.left_modle {
				&.on {
					border: 1px dashed #f71414;
				}
			}
			.search {
				height: 30px;
				border-radius: 15px;
				color: #b7b8ba;
				background: #f0f1f3;
				font-size: 12px;
				padding: 0 20px;
				box-sizing: border-box;
				margin: 17px;
			}
			.banner_box {
				margin: 0 17px;
				margin-top: 15px;
			}
			.info {
				margin: 0 17px;
			}
			.part {
				// width: 100%;
				margin: 0 16px;
			}
			.title {
				font-size: 16px;
				font-weight: 600;
				color: #191919;
				margin: 0 17px 20px;
			}
			.subject {
				margin: 0 17px;
			}
		}
		.right {
			float: left;
			margin-left: 20px;
			/deep/.modle {
				color: #797979;
				border: 1px solid #e7e7e7;
				background: #f5f7fa;
				padding: 10px 27px;
				.submit {
					width: 150px;
					padding: 10px 15px;
					border-radius: 4px;
					background: #19b098;
					color: #fff;
					margin-top: 20px;
				}
				.tit {
					color: #19b098;
					margin-bottom: 14px;
					&::before {
						content: "-";
						color: transparent;
						background: #19b098;
						width: 4px;
						height: 13px;
					}
					b {
						color: #000;
						font-size: 14px;
						margin-left: 6px;
						margin-right: 19px;
					}
				}
			}
			.tabbar {
				.setting {
					span {
						display: inline-block;
						width: 60%;
						margin-top: 10px;
					}
				}
			}
		}
	}
}

// 改动
.part_model {
	margin-top: 10px !important;
}
.special {
	background-color: #fff;
	margin: 10px 16px 0 16px;
	padding-bottom: 16px;
	.special_title {
		font-size: 16px;
		font-weight: 600;
		color: #191919;
		padding: 15px 18px 7px 18px;
	}
}
.commodity {
	background-color: #fff;
	margin: 10px 16px 0 16px;
}

.upload_type_container {
	display: flex;
	align-items: center;
	justify-content: space-around;
	& > div {
		width: 90px;
		height: 90px;
		text-align: center;
		line-height: 90px;
		font-size: 14px;
		color: #ccc;
		border: 1px dashed #e6e6e6;
		cursor: pointer;
	}
}
.online_images_dialog {
	/deep/ .el-dialog__body {
		padding: 0 20px 10px;
	}
	/deep/.el-tabs__item:focus.is-active.is-focus:not(:active) {
		box-shadow: none !important;
	}
	/deep/ .el-tabs__item.is-active {
		color: #19b098;
	}
	/deep/ .el-tabs__active-bar {
		background-color: #19b098;
	}
	/deep/.el-tabs__item {
		&:hover {
			color: #19b098;
		}
	}
	/deep/.el-icon-arrow-left,
	/deep/.el-icon-arrow-right {
		font-size: 16px;
	}
}
.online_images_container {
	.header {
		min-height: 40px;
	}
	//中间部分
	.container {
		width: 100%;
		height: 400px;
		overflow: auto;
		.no_image {
			width: 100%;
			padding-top: 40px;
			text-align: center;
		}
		.image_box {
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			flex-wrap: wrap;
			.item {
				margin-right: 15px;
				margin-bottom: 15px;
				position: relative;
				max-width: 230px;
				min-width: 60px;
				border-radius: 8px;
				overflow: hidden;
				.el-image {
					width: 100%;
				}
				.image {
					font-size: 0;
				}
				.image_mask_main {
					cursor: pointer;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-color: rgba($color: #000000, $alpha: 0.5);
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 12px;
					font-family: PingFang SC;
					font-weight: 400;
					color: #ffffff;
					span {
						cursor: pointer;
					}
				}
			}
		}
	}
	.footer_page {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.main_page {
			margin-top: 10px;
			margin-left: 0px;
			margin-bottom: 0px;
		}
	}
}
.dropdown_item {
	display: flex;
	align-items: center;
	flex-direction: row;
	a {
		padding: 0 10px;
		color: #19b098;
		text-decoration: underline;
		min-width: 150px;
	}
	i {
		font-size: 16px;
		&:hover {
			color: #19b098;
		}
	}
}
</style>